<template>
	<view>
		<view class='bg-white'>
			<view class="d-flex j-sb">
				<view class="item-type">{{detail.problemType===1?'机器故障':'耗材故障'}}</view>
				<view class="item-level"
				:class="{'bg-danger':detail.problemLevel===1,'bg-orange':detail.problemLevel===2,'bg-info':detail.problemLevel===3}">{{detail.problemLevel}}</view>
			</view>
			<view class="d-flex border-bottom p-2 j-sb">
			  <view>故障单号：{{detail.orderNums}}</view>
			  <view>
				<text v-if="detail.state===0" class="text-danger">待处理</text>
				<text v-if="detail.state===1" class="text-success">已完成</text>
			  </view>
			</view>
			<view class="p-2">
				<view class="font-weight">{{detail.plasmaStationName}}</view>
				<view v-if="detail.shMachine">机器：{{detail.shMachine.type}}({{detail.shMachine.macCode}})</view>
				<view class="dec">故障描述：{{detail.problem}}</view>
			</view>
			 <!-- 图片信息 -->
			<view class="p-2">
			  <view>故障图片</view>
			  <view class='d-flex j-sb'>
				<view v-if="detail.picture1">
				  <image :src="detail.picture1" mode="aspectFit"  class="image-item" @click="previewImage(detail.picture1)"></image>
				</view>
				<view v-if="detail.picture2" >
				  <image :src="detail.picture2" mode="aspectFit" class="image-item" @click="previewImage(detail.picture2)"></image>
				</view>
				<view v-if="detail.picture3">
				  <image :src="detail.picture3" mode="aspectFit" class="image-item" @click="previewImage(detail.picture3)"></image>
				</view>
			  </view>
			</view>
			<!-- 报修基本信息 -->
			<view  class="px-2"  v-if="detail.creatorName"><text>联系电话：{{detail.creatorName.phone}}</text></view>
			<view  class="p-2 d-flex j-sb" v-if="detail.creatorName">
				<text>报修人：{{detail.creatorName.name}}</text>
				<text>报修时间：{{detail.createTime}}</text>
				</view>
			
		</view>

		<!-- 故障单处理 -->
		<view class="bg-white pt-2 mt-2">
		    <view class="d-flex j-sb px-2 pb-2 position-relative" @click="showDetail('wechatRepairShow')">
		        <text>报修单处理</text>
				<text  class="iconfont" :class="wechatRepairShow?'icon-jiantouarrow483':'icon-jiantouarrow487'"></text>
				<text class="font-weight text-success position-absolute rounded-circle" v-if="detail.state!==0" style="top:0upx;left:180upx">[ {{detail.dealResult===1?'自修':'派修'}} ]</text>
		    </view>
		    <view  v-if="wechatRepairShow">
		      <view v-if="detail.state!==0">
		         <view  class="px-2 pb-2 d-flex j-sb" v-if="detail.dealResult===1">
					  <view> <text class="mr-1">自修人:</text><text class="text-muted">{{detail.dealerName.name}}</text></view>
					  <view><text class="mr-1">联系电话:</text><text class="text-muted">{{detail.dealerName.phone}}</text></view>
				</view>
		        <view  v-else-if="detail.dealResult===2" class="px-2 pb-2 d-flex j-sb">
		          <view><text class="mr-1">派修人:</text><text class="text-muted">{{detail.dealerName.name}}</text></view>
		          <view><text class="mr-1">联系电话:</text><text class="text-muted">{{detail.dealerName.phone}}</text></view>
		        </view>
		        <!-- <view v-else-if="detail.dealResult===3">
		          <view class="px-2 pb-2 d-flex"><text class="mr-1">处理结果:</text><text class="text-muted">已处理</text></view>
		        </view> -->
				<view v-if="detail.dealRemark" class="px-2 pb-2 d-flex "><text class="mr-1">备注:</text><text class="text-muted">{{detail.dealRemark}}</text></view>
		        <view  class="px-2 pb-2 d-flex"><text class="mr-1">处理时间:</text><text class="text-muted">{{detail.dealTime}}</text></view>
		      </view>
			  <slot name="selectDealerName"></slot>
		    </view>
		</view>

		<!-- 故障单处理 -->
		<view class="bg-white my-2 pt-2" v-if="detail.state===1">
		  <!-- 头部 -->
			<view class="d-flex j-sb px-2 pb-2 position-relative" @click="showDetail('dealRepair')">
		      <text>{{detail.state===1&&repairDetail.state?'故障单处理详情':'故障单处理'}}</text>
		      <view><text class="iconfont " :class="dealRepair?'icon-jiantouarrow483':'icon-jiantouarrow487'"></text></view>
			  <text class="font-weight text-success position-absolute rounded-circle"  v-if="repairDetail.state" style="top:0upx;left:220upx">[ {{repairDetail.result?'已修复':'未修复'}} ]</text>
		    </view>
		  <!-- 内容 -->
		  <view  v-if="dealRepair">
		   <!-- 自修单处理详情 -->
				<view  v-if="repairDetail.state">
					
		  		  <!-- 图片信息 -->
		  		  <view class="px-2 pb-2">
		  			<view >处理图片</view>
		  			<view class='d-flex j-sb'>
		  			  <view   v-if="repairDetail.picture1">
		  				<image :src="repairDetail.picture1" mode="aspectFit" class="image-item" @click="previewImage(repairDetail.picture1)"></image>
		  			  </view>
		  			  <view v-if="repairDetail.picture2" >
		  				<image :src="repairDetail.picture2" mode="aspectFit" class="image-item" @click="previewImage(repairDetail.picture2)"></image>
		  			  </view>
		  			  <view  v-if="repairDetail.picture3" >
		  				<image :src="repairDetail.picture3" mode="aspectFit" class="image-item" @click="previewImage(repairDetail.picture3)"></image>
		  			  </view>
		  			</view>
		  		  </view>
		  		  <!-- 备注 -->
					<view  v-if="repairDetail.remark" class="px-2 pb-2">
						<text class="mr-1">备注说明:</text>
						<text class="text-muted">{{repairDetail.remark}}</text>
					</view>
					<view class="px-2 pb-2 d-flex j-sb">
				   	<view class="font-sm"><text class="mr-1">开始:</text><text  class="text-muted">{{repairDetail.startTime}}</text></view>
				   	<view class="font-sm"><text class="mr-1">结束:</text><text  class="text-muted">{{repairDetail.endTime}}</text></view>
					</view>
		  		</view>
				<slot name="repairDetail"></slot>
		  </view>
		</view>
		
		<!-- 换上的零件或备件列表 -->
		<view class="bg-white pt-2 my-2">
			<view class="d-flex j-sb px-2 pb-2 ">
				<view class="d-flex">
					<view> <text>换上的零件或备件列表</text> <text class="ml-1 text-white px-1 rounded-circle bg-danger">{{selfRepairUseList.length}}</text></view>
					<view class="iconfont icon-jia text-orange font-weight ml-1" v-if="detailType===3"
					@click="add('addComponents')"
					><text class="font-md">添加</text></view>
				</view>
			    <view  class="iconfont " :class="addComponents?'icon-jiantouarrow483':'icon-jiantouarrow487'" @click="showDetail('addComponents')"></view>
			</view>
			<view v-if="addComponents">
				<view v-if="selfRepairUseList.length>0">
					<view v-for="item in selfRepairUseList" :key="item.id" class="p-2 border-bottom">
						<view v-if="item.type===1">
							<view class="d-flex j-sb">
								<text class="font-weight">{{item.wechatMaterialName.cgMaterial.name}}</text>
								<text class="iconfont icon-shanchu1 text-danger" @click="deleteRepairUse(item,'addComponents')" v-if="detailType===3"></text>
							</view>
							<view class="d-flex j-sb font-sm">
								<text v-if="item.wechatMaterialName.cgMaterial.type">规格型号：{{item.wechatMaterialName.cgMaterial.type}}</text>
								<text v-if="item.wechatMaterialName.cgMaterial.texture">材质：{{item.wechatMaterialName.cgMaterial.texture}}</text>
							</view>
							<view  class="d-flex j-sb font-sm">
								<text v-if="item.wechatMaterialName.batch">批号：{{item.wechatMaterialName.batch}}</text>
								<text v-if="item.wechatMaterialName.code">编号：{{item.wechatMaterialName.code}}</text>
							</view>
							<view  class="font-sm">用量：{{item.wechatMaterialName.nums}}</view>
						</view>
						<view v-else>
							<view class="d-flex j-sb">
								<text class="font-weight">{{item.wechatPartsName.jqbzSettings.name}}</text>
								<text class="iconfont icon-shanchu1 text-danger" @click="deleteRepairUse(item,'addComponents')" v-if="detailType===3"></text>
							</view>
							<view v-if="item.wechatPartsName.jqbzSettings.code" class="font-sm">备件编码：{{item.wechatPartsName.jqbzSettings.code}}</view>
							<view  class="d-flex j-sb font-sm">
							    <text v-if="item.wechatPartsName.batch">批号：{{item.wechatPartsName.batch}}</text>
							    <text v-if="item.wechatPartsName.code">编号：{{item.wechatPartsName.code}}</text>
							</view>
							<view  class="font-sm">用量：{{item.wechatPartsName.nums}}</view>
						</view>
					</view>
				</view>
				<view v-else class="py-3 font-sm text-center text-light-muted">暂无换上的零件或备件</view>
			</view>
		</view>
		
		<!-- 换下的部件列表 -->
		<view class="bg-white pt-2 my-2">
			<view class="d-flex j-sb px-2 pb-2 ">
				<view class="d-flex">
					<view><text>换下的部件列表</text><text class="ml-1 text-white px-1 rounded-circle bg-danger">{{uninstallMaterialList.length}}</text></view>
					<view class="iconfont icon-jia text-orange font-weight ml-1" v-if="detailType===3"
					@click="add('uninstallMaterial')"
					><text class="font-md">添加</text></view>
				</view>
			    <view  class="iconfont" :class="uninstallMaterial?'icon-jiantouarrow483':'icon-jiantouarrow487'"  @click="showDetail('uninstallMaterial')"></view>
			</view>
			<view v-if="uninstallMaterial">
				<view v-if="uninstallMaterialList.length>0" >
					<view v-for="item in uninstallMaterialList" :key="item.id" class="px-2 pb-2 border-bottom">
						<view class="d-flex j-sb">
							<text class="font-weight">{{item.jqbzSettings.name}}</text>
							<text class="iconfont icon-shanchu1 text-danger" @click="deleteRepairUse(item,'uninstallMaterial')" v-if="detailType===3"></text>
						</view>
						<view v-if="item.jqbzSettings.code" class="font-sm">备件编码：{{item.jqbzSettings.code}}</view>
						<view  class="d-flex j-sb font-sm">
							<view v-if="item.batch">批号：{{item.batch}}</view>
							<view v-if="item.code">编号：{{item.code}}</view>
						</view>
					</view>
				</view>
				<view v-else class="py-3 font-sm text-center text-light-muted">
					暂无换下的配件
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/api.js'
	export default{
		data(){
			return {
				wechatRepairShow: false,/**是否展示报修单处理详情 */
				dealRepair:false,
				addComponents: false,/**是否展示换上的零件或备件列表 */
				uninstallMaterial: false,/**是否展示换上的零件或备件列表 */
				selfRepairUseList:[],
				uninstallMaterialList:[]
			}
		},
		props:{
			detail:{
				type:Object
			},
			repairDetail:{
				type:Object
			},
			id:{
				type:[String,Number]
			},
			detailType:{
				type:[Number]
			}
		},
		methods:{
			init(){
				/**查询换上的零件或备件列表*/
				this.getSelfRepairUseList();
				/**查询换下的部件列表*/
				this.getUninstallMaterialList()
			},
			/**获取换上的零件或备件列表*/
			getSelfRepairUseList() {
				this.$H.get(api.sendRepairUseList+this.id).then(res=>{
					this.selfRepairUseList=res.content
				})
			  },
			 /**获取派修单换下的部件*/
			getUninstallMaterialList() {
				this.$H.get(api.uninstallMaterialList+this.id+'/2').then(res=>{
					this.uninstallMaterialList=res.content
				});
			},
			showDetail(type){
				let self = this;
				switch(type){
					case 'wechatRepairShow':
					self.wechatRepairShow=!self.wechatRepairShow;
					break;
					case 'dealRepair':
					 self.dealRepair = !self.dealRepair
					break;
					case 'addComponents':
					self.addComponents=!self.addComponents;
					break;
					case 'uninstallMaterial':
					 self.uninstallMaterial = !self.uninstallMaterial
					break;
				}
			},
			add(type){
				let url;
				switch(type){
					case'addComponents':
					url=`/pages/addComponents/addComponents?id=${this.id}&repairType=send&pid=${this.detail.plasmaStationId}`
					break;
					case'uninstallMaterial':
					url=`/pages/addUninstallMaterial/addUninstallMaterial?id=${this.id}&repairType=send`
					break;
				}
				uni.navigateTo({
					url
				})
			},
			deleteRepairUse(item,type){
				let self = this;
				switch(type){
					case'addComponents':
					uni.showModal({
						title: '是否移除换上的零件或备件',
						success(res) {
							if (res.confirm) {
								self.$H.get(api.deleteSendRepairUse+item.id).then(res=>{
									uni.showToast({
										title:'移除成功',
										icon:'success'
									})
									self.getSelfRepairUseList()
								})
							}
						}
					})
					break;
					case'uninstallMaterial':
					uni.showModal({
						title: '是否移除换下的部件',
						success(res) {
							if (res.confirm) {
								self.$H.get(api.deleteUninstallMaterial+item.id).then(res=>{
									uni.showToast({
										title:'移除成功',
										icon:'success'
									})
									self.getUninstallMaterialList()
								})
							}
						}
					})
					break;
				}
			},
			/**图片预览*/ 
			previewImage(url){
				uni.previewImage({
					urls:[url]
				})
			}
		}
	}
</script>

<style>
	.item-type{
	  font-size: 28upx;
	  top:90upx;
	  left:0;
	  width:140upx;
	  height:56upx;
	  line-height: 56upx;
	  text-align: center;
	  background: #c9bebd;
	  color:#f9f8f8;
	}
	.item-level{
		  top:90rpx;
		  right:0;
		  width:80rpx;
		  height:56rpx;
		  line-height: 56rpx;
		  text-align: center;
		  color:#fff;
		  border-bottom-left-radius: 30rpx;
	}
	.image-item{
	  width:200upx;
	  height:200upx;
	  line-height: 200upx;
	  text-align: center;
	}
</style>
